<!-- 管理员:课程考核管理:题库和在线考试管理:试卷库管理:新增试卷 -->
<template>
  <div style="width:100% !important;">
    <div>
      <div class="xpaas-steps">
        <div id="id_xpaas_step_1"
             class="xpaas-step xpaas-step-active"><i /><span class="xpaas-step-label">第一步：基本信息</span></div>
        <div id="id_xpaas_step_2"
             class="xpaas-step"><i /><span class="xpaas-step-label">第二步：选择试题</span></div>
        <!-- <div id="id_xpaas_step_3"
             class="xpaas-step"><i /><span class="xpaas-step-label">第三步：试卷设置</span></div> -->
        <div id="id_xpaas_step_4"
             class="xpaas-step"><i /><span class="xpaas-step-label">第三步：完成</span></div>
      </div>
      <div style="background-color:#919191;height:1vh;position:relative;top:-1vh;z-index:-1;"></div>
    </div>
    <div style="margin:15px 0 20px 0;">
      <div :class="divDisplay1">
        <xpaas-step1 ref="di1" />
      </div>
      <div :class="divDisplay2"
           ref="di2">
        <xpaas-step2 />
      </div>
      <div :class="divDisplay3"
           ref="di3">
        <xpaas-step3 />
      </div>
      <div :class="divDisplay4"
           ref="di4">
        <xpaas-step4 />
      </div>
    </div>
    <div class="button-container-block"
         id="id_xpaas_step_button_container_1">
      <el-button type="warning"
                 size="mini"
                 :plain=true
                 @click="onBtnStep1toStep2ClickHandler">保存并进入下一步</el-button>
      <span class="button-seprator"></span>
      <el-button type="danger"
                 :plain=true
                 size="mini">取消</el-button>
    </div>
    <!-- <div class="button-container-none"
         id="id_xpaas_step_button_container_2">
      <el-button type="warning"
                 :plain=true
                 size="mini"
                 @click="onBtnStep2toStep3ClickHandler">保存并进入下一步</el-button>
      <span class="button-seprator"></span>
      <el-button type="danger"
                 :plain=true
                 size="mini">取消</el-button>
    </div> -->
    <div class="button-container-none"
         id="id_xpaas_step_button_container_2">
      <span class="button-seprator"></span>
      <el-button type="success"
                 size="mini"
                 :plain=true
                 @click="onBtnStep3toStep4ClickHandler">下一步去生成试卷</el-button>
      <span class="button-seprator"></span>
      <el-button type="danger"
                 :plain=true
                 size="mini">取消</el-button>
    </div>
    <div class="button-container-none"
         id="id_xpaas_step_button_container_4">
      <el-button type="primary"
                 size="mini"
                 :plain=true
                 @click="onBtnStep4ClickHandler">发布</el-button>
      <span class="button-seprator"></span>
      <el-button type="danger"
                 :plain=true
                 @click="fanhui"
                 size="mini">取消</el-button>
    </div>
  </div>
</template>
<script>
import Step1 from './step1'
import Step2 from './step2'
import Step3 from './step3'
import Step4 from './step4'
// import { getQuestionlist } from '@/api/examinations/gitlist'
import { gettestpaper } from '@/api/examinations/sjkgetlist.js'
export default {
  components: {
    'xpaas-step1': Step1,
    'xpaas-step2': Step2,
    'xpaas-step3': Step3,
    'xpaas-step4': Step4,
  },
  data() {
    return {
      divDisplay1: 'xpaas-step-display-block',
      divDisplay2: 'xpaas-step-display-none',
      divDisplay3: 'xpaas-step-display-none',
      divDisplay4: 'xpaas-step-display-none',
    }
  },
  mounted() {
    if (this.$route.params.id === 1) {
      this.divDisplay2 = 'xpaas-step-display-block'
      this.divDisplay1 = 'xpaas-step-display-none'
      document.getElementById('id_xpaas_step_button_container_1').className =
        'button-container-none'
      document.getElementById('id_xpaas_step_2').className =
        'xpaas-step xpaas-step-active'
      document.getElementById('id_xpaas_step_button_container_2').className =
        'button-container-block'
    }
  },

  methods: {
    fanhui() {
      this.$router.push({
        name: '试卷库管理',
      })
    },
    onBtnStep1toStep2ClickHandler: function () {
      console.log(this.$refs.di1.data1)
      let di1 = this.$refs.di1.data1
      let di2 = this.$refs.di2.data1
      let di3 = this.$refs.di3.data1
      let di4 = this.$refs.di4.data1
      this.$message.info('第一页 到 第二页')
      this.divDisplay1 = 'xpaas-step-display-none'
      this.divDisplay2 = 'xpaas-step-display-block'
      document.getElementById('id_xpaas_step_2').className =
        'xpaas-step xpaas-step-active'
      document.getElementById('id_xpaas_step_button_container_1').className =
        'button-container-none'
      document.getElementById('id_xpaas_step_button_container_2').className =
        'button-container-block'
    },
    // onBtnStep2toStep3ClickHandler: function () {
    //   this.$message.info('第二页 到 第三页')
    //   this.divDisplay2 = 'xpaas-step-display-none'
    //   this.divDisplay3 = 'xpaas-step-display-block'
    //   document.getElementById('id_xpaas_step_3').className =
    //     'xpaas-step xpaas-step-active'
    //   document.getElementById('id_xpaas_step_button_container_2').className =
    //     'button-container-none'
    //   document.getElementById('id_xpaas_step_button_container_3').className =
    //     'button-container-block'
    // },
    onBtnStep3toStep4ClickHandler: function () {
      this.$message.info('第三页 到 第四页')
      this.divDisplay2 = 'xpaas-step-display-none'
      this.divDisplay4 = 'xpaas-step-display-block'
      document.getElementById('id_xpaas_step_4').className =
        'xpaas-step xpaas-step-active'
      document.getElementById('id_xpaas_step_button_container_2').className =
        'button-container-none'
      document.getElementById('id_xpaas_step_button_container_4').className =
        'button-container-block'
    },
    onBtnStep4ClickHandler: function () {
      this.$message.info('最后的按钮')
    },
  },
}
</script>
<style lang="less" scoped>
@import '../../courseAssessmentScoped.less';
@import '../../exportBtn.less';

.xpaas-step-display-block {
  display: block;
}
.xpaas-step-display-none {
  display: none;
}

.button-container-block {
  text-align: center;
  .button-seprator {
    display: inline-block;
    width: 60px;
  }
}
.button-container-none {
  display: none;
}

.xpaas-steps {
  font-size: 16px;
  font-weight: bold;
  font-family: @fontFamily;
  color: #919191;
  .xpaas-step {
    display: inline-block;
    padding: 0 0 6px 0;
    border-bottom-style: solid;
    border-bottom-width: 1vh;
    border-bottom-color: transparent;
    i {
      display: inline-block;
      width: 12px;
      height: 12px;
      background-repeat: no-repeat;
      background-image: url('../../../../../assets/assessment/arrow.png');
      background-position: center;
      background-origin: content-box;
      background-size: 12px 12px;
    }
    .xpaas-step-label {
      margin: 0 25px;
    }
  }
  .xpaas-step-active {
    border-bottom-color: #004ca7;
    color: #004ca7;
  }
  .xpaas-step:first-child {
    i {
      width: 0px;
    }
    .xpaas-step-label {
      margin-left: 0;
    }
  }
  .xpaas-step:last-child {
    .xpaas-step-label {
      margin-right: 0;
    }
  }
}
</style>